<template>
  <div>
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in images" :key="item.id">
        <img :src="item.src" alt="幻灯片图像" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
    <el-divider><i class="el-icon-document"></i></el-divider>
    <el-collapse v-model="activeNames" @change="handleChange" class="collapse">
      <el-collapse-item title="石昊" name="2">
        <div>至尊骨</div>
      </el-collapse-item>
      <el-collapse-item title="火灵儿" name="3">
        <div>火凰后裔</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  data () {
    return {
      images: [
        { id: 1, src: require('@/assets/images/1.jpg') },
        { id: 2, src: require('@/assets/images/2.jpeg') },
        { id: 3, src: require('@/assets/images/3.webp') },
        { id: 4, src: require('@/assets/images/4.png') }
      ],
      activeNames: ['1']
    }
  },
  methods: {
    handleChange (val) {
      // console.log(val)
    }
  }
}
</script>
<style>
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图像覆盖整个容器 contain: 使图像全部显示*/
}
</style>
<!-- <template>
  <div>
    <el-carousel :interval="5000" arrow="">
      <el-carousel-item v-for="item in images" :key="item.id">
        <img :src="item.src" alt="幻灯片图像" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
     <el-collapse v-model="activeNames" @change="handleChange" class="collapse">
      <el-collapse-item title="石昊" name="2">
        <div>至尊骨</div>
      </el-collapse-item>
      <el-collapse-item title="火灵儿" name="3">
        <div>火凰后裔</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  data () {
    return {
      images: [
        { id: 1, src: require('@/assets/images/1.jpg') },
        { id: 2, src: require('@/assets/images/2.jpeg') },
        { id: 3, src: require('@/assets/images/3.webp') },
        { id: 4, src: require('@/assets/images/4.png') }
      ]
    }
  }
}
</script>
<style>
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图像覆盖整个容器 contain: 使图像全部显示*/
}
</style> -->
